<script setup lang="ts">
const props = defineProps({
  source: {
    type: String,
    required: true,
  },
  type: {
    type: String,
    default: 'one'
  },
});
</script>

<template>

  <div :class="props.type === 'one'?'dev-g-source':'dev-g-source-two'">
    <div v-html="props.source"></div>
  </div>
</template>

<style scoped lang="scss">
.dev-g-source {
  color: var(--dev-g-code-color-3);
  border-top: 1px solid var(--dev-g-border-color);
  position: relative;
  padding-bottom: 5px;
  background-color: var(--dev-g-code-background);
}

.dev-g-source-two {
  color: var(--dev-g-code-color-3);
  border: 1px solid var(--dev-g-border-color);
  border-radius: 6px;
  position: relative;
  background-color: var(--dev-g-code-background);
}

</style>
